import React, { useEffect, useState } from "react";
import { useNavigate, useParams } from "react-router-dom";
import instance from "../../api/request";
import { Button, NavBar } from "antd-mobile";
import styles from "./Index.module.css";
function Index() {
  const nav = useNavigate();

  const [wendetail, setWendetail] = useState([]);
  const { doctorId } = useParams();

  useEffect(() => {
    instance
      .get("/api/user/inquiry/v1/findDoctorInfo", {
        params: {
          doctorId: doctorId,
        },
      })
      .then((res) => {
        console.log(res, "=====详情页");
        setWendetail(res.data.result);
      });
  }, [doctorId]);

  return (
    <div className={styles.zong}>
      <div className={styles.heard}>
        <NavBar className={styles.nav} onBack={() => nav(-1)}>
          医生详情
        </NavBar>
      </div>

      <div className={styles.xiaz}>
        <div className={styles.ding}>
          <div className={styles.tu}>
            <img src={wendetail.imagePic} alt="" />
          </div>

          <div className={styles.you}>
            <div style={{ display: "flex", gap: "10px" }}>
              <h3>{wendetail.doctorName}</h3>
              <span>{wendetail.jobTitle}</span>
            </div>

            <div style={{ marginTop: "8px" }}>
              <span>{wendetail.inauguralHospital}</span>
            </div>

            <div style={{ marginTop: "8px", display: "flex", gap: "10px" }}>
              <h4>好评率 {wendetail.praise}</h4>
              <h4>服务患者数:{wendetail.serverNum}</h4>
            </div>

            <div>
              <div className={styles.wenz}>
                <div>
                  <img src="/wen.jpg" alt="" />
                </div>
                <div className={styles.zi}>他收到的礼物</div>
              </div>

              <div className={styles.listli}>
                {wendetail.doctorReceiveGiftList &&
                wendetail.doctorReceiveGiftList.length > 0 ? (
                  wendetail.doctorReceiveGiftList.map((item, index) => (
                    <dl key={index}>
                      <ul>
                        <img
                          src={
                            item.giftPic && item.giftPic.includes(".")
                              ? item.giftPic
                              : "/flower.png"
                          }
                          alt={item.giftName}
                        />
                      </ul>
                      <li style={{ marginLeft: "18px" }}>{item.receiveNum}</li>
                    </dl>
                  ))
                ) : (
                  <>
                    <dl>
                      <ul>
                        <img src="/flower.png" alt="" />
                      </ul>
                      <li>0</li>
                    </dl>
                    <dl>
                      <ul>
                        <img src="/wen.png" alt="" />
                      </ul>
                      <li>0</li>
                    </dl>
                    <dl>
                      <ul>
                        <img src="/jiang.png" alt="" />
                      </ul>
                      <li>0</li>
                    </dl>
                  </>
                )}
              </div>
            </div>
          </div>
        </div>

        <div className={styles.xiajie}>
          <div className={styles.wenz}>
            <div>
              <img src="/wen.jpg" alt="" />
            </div>
            <div className={styles.zi}>个人简介</div>
          </div>

          <div style={{ marginTop: "10px", marginLeft: "10px" }}>
            {wendetail.personalProfile}
          </div>

          <div className={styles.wenz}>
            <div>
              <img src="/wen.jpg" alt="" />
            </div>
            <div className={styles.zi}>擅长领域</div>
          </div>

          <div style={{ marginTop: "10px", marginLeft: "19px" }}>
            {wendetail.goodField}
          </div>

          <div className={styles.wenz}>
            <div>
              <img src="/wen.jpg" alt="" />
            </div>
            <div className={styles.zi}>用户评价{wendetail.commentNum}</div>
          </div>
          
          <div style={{ marginTop: "10px", marginLeft: "19px" }}>
            {wendetail.commentList && wendetail.commentList.length > 0 ? (
              wendetail.commentList.map((item, index) => (
                <div
                  key={index}
                  style={{
                    display: "flex",
                    alignItems: "center",
                    gap: "10px",
                    marginBottom: "10px",
                    padding: "10px",
                    background: "#f5f5f5",
                    borderRadius: "8px",
                  }}
                >
                  <img
                    src={
                      item.headPic 
                        
                    }
                    alt=""
                    style={{
                      width: "40px",
                      height: "40px",
                      borderRadius: "50%",
                      background: "#ddd",
                    }}
                  />
                  <div>
                    <div style={{ fontWeight: "bold" }}>{item.nickName}</div>
                    <div>{item.content}</div>
                  </div>
                </div>
              ))
            ) : (
              <div style={{ color: "#999" }}>暂无评价</div>
            )}


              <div>
                <a style={{marginLeft:'100px'}} onClick={(key)=>nav(`/pklist/${doctorId}`)}>点击查看更多评论</a>
              </div>
          </div>
        </div>
      </div>





      <div className={styles.footer}>
        <div
          style={{ marginTop: "10px", marginLeft: "100px", fontSize: "20px" }}
        >
          {wendetail.servicePrice}H币/次
        </div>

        <div>
          <Button color="primary" fill="solid" className={styles.btn} onClick={()=>nav('/chat')}>
            立即咨询
          </Button>
        </div>
      </div>
    </div>
  );
}

export default Index;
